<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="pf.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".tab1").find(".tab_box div:gt(0)").hide();
	var li1s = $(".tab1").find(".tab_menu li");
	li1s.eq(0).addClass("first").addClass("selected");
	var idx = 0;
	li1s.click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		idx = li1s.index(this);
		$(".tab_box div").eq(idx).show().siblings().hide();
	});
	//===============================================
	$(".tab2").find(".tab_box div:gt(0)").hide();
	var li2s = $(".tab2").find(".tab_menu li");
	li2s.eq(0).addClass("selected");
	var idx2 = 0;
	li2s.click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		idx2 = li2s.index(this);
		$(".tab2 .tab_box div").eq(idx2).show().siblings().hide();
	});
	//==========================
	$(".tab3").find(".tab_box div:gt(0)").hide();
	var li3s = $(".tab3").find(".tab_menu li");
	li3s.eq(0).addClass("selected");
	var idx3 = 0;
	li3s.click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		idx3 = li3s.index(this);
		$(".tab3 .tab_box div").eq(idx3).show().siblings().hide();
	});
});
</script>
</head>
<body style="padding:50px;">
<div class="tab1">
  <ul class="tab_menu">
    <li>热门活动</li>
    <li>好友活动</li>
    <li>我的活动</li>
  </ul>
  <div class="tab_box">
    <div>
    	<input type="button" value="写日志" class="img_art btn1 "/>
    </div>
    <div>css</div>
    <div>javascript</div>
  </div>
</div>
<br/>
<div class="tab2">

  <ul class="tab_menu">
    <li>热门活动</li>
    <li>好友活动</li>
    <li>我的活动</li>
  </ul>

  <div class="tab_box">
    <div>
    	<input type="button" value="写日志" class="img_art btn1 "/>
    </div>
    <div>css</div>
    <div>javascript</div>
  </div>
</div>

<div class="tab3">

  <ul class="tab_menu">
    <li>热门活动</li>
    <li>好友活动</li>
    <li>我的活动</li>
  </ul>

  <div class="tab_box">
    <div>
    	<input type="button" value="写日志" class="img_art btn1 "/>
    </div>
    <div>css</div>
    <div>javascript</div>
  </div>
</div>

</body>
</html>
